<template>
    <div class="mt-96">
        <div class="memberdetail-main">

            <div class="order-commod">
                <ul>
                    <li>
                        <div class="trans-main">
                            <div class="trans-img">
                                <img :src="bullyUserInfo.avatarUrl || defaultImg">
                            </div>
                            <div class="trans-text">
                                <h2>玩家</h2>
                                <p v-if="levelingOrder.orderType!=5">{{levelingOrder.playerPhone || mainOrderInfo.playerPhone}}</p>
                                <p v-if="levelingOrder.orderType==5"><!--{{levelingOrder.bullyPhone.slice(-11)}}-->{{playerUserInfo.pcUserName.slice(-11)}}</p>
                            </div>
                            <div class="trans-rgpl">
                                <a v-if="levelingOrder.orderType!=5" class="rgpl-tel"
                                   :href="'tel:' +(levelingOrder.playerPhone || mainOrderInfo.playerPhone)">
                                    <i class="tel">打电话</i>
                                </a>
                                <a v-if="levelingOrder.orderType==5" class="rgpl-tel"
                                   :href="'tel:' +playerUserInfo.pcUserName.slice(-11)">
                                    <i class="tel">打电话</i>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <dl>
                            <dt>
                            <div class="comd-img">
                                <i class="dan" v-if="levelingOrder.orderType!=5">代</i>
                                <i class="pei" v-if="levelingOrder.orderType==5">陪</i>
                                <img :src="levelingOrder.orderImg || defaultImg">
                            </div>
                            </dt>
                            <dd v-if="levelingOrder.orderType!=5">
                                <h2 class="pti">
                                    {{levelingOrder.gameName || mainOrderInfo.gameName}}/{{levelingOrder.regionName || mainOrderInfo.regionName}}/{{levelingOrder.serverName || mainOrderInfo.serverName}}</h2>
                                <p v-if="mainOrderInfo.mainOrderNo">{{mainOrderInfo.levelingCombo}}</p>
                                <p class="plt" v-else>
                                    {{levelingOrder.comboType=='positionGame'?'定位赛':(levelingOrder.comboType=='elevateGrade'?'升等级':'升段位')}}
                                    {{levelingOrder.currentLevel}}-{{levelingOrder.targetLevel}}
                                    {{levelingOrder.levelComboDay}}天完成</p>
                                <p class="plt">￥{{levelingOrder.totalAmount || mainOrderInfo.totalAmount}}</p>
                            </dd>
                            <dd v-if="levelingOrder.orderType==5">
                                <h2 class="pti">
                                    {{levelingOrder.gameName}}/{{levelingOrder.regionName}}/{{levelingOrder.serverName}}</h2>
                                <p class="plt">{{levelingOrder.roleName}} {{levelingOrder.playerLevel}}
                                    陪练{{levelingOrder.completeSparringSessions}}场</p>
                                <p class="plt">￥{{levelingOrder.totalAmount}}</p>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="pllist-main" v-if="publish">
                <!-- <a @click="next()"> -->
                    <!-- <a :href="'/pl/pl-publish.html?usertype=2&serverid='+levelingOrder.serverId+'&areaid='+levelingOrder.regionId+'&gid='+levelingOrder.gameId+'&gname='+levelingOrder.gameName+'&areaname='+levelingOrder.regionName+'&servername='+levelingOrder.serverName">
                    <span>点击发布</span>
                    <label>
                        <i>陪</i>
                        在代练中也能陪练赚钱哦
                    </label>
                </a> -->
            </div>
            <div class="trans-record pb-200" v-if="!$route.query.mainOrderNum || $route.query.mainOrderNum=='false'">
                <div class="reco-title">代练进度</div>
                <ul id="process">
                    <li id="process_1" :class="{'tractive':index==0}" v-for="(item,index) in progress">
                        <div class="trans-left">
                            <span class="hover">
                                <i class="pod-ico"></i>
                            </span>
                        </div>
                        <div class="trans-right">
                            <i class="prico"></i>
                            <h2>
                                {{item.opContent}}
                            </h2>
                            <p><span class="setTime">{{getMyDate(item.createTime)}}</span></p>
                        </div>
                    </li>
                </ul>

            </div>

            <div class="inds-foot">
                <div class="dlmain-btn" id="dlmain-btn">
                    <a class="dialogs ared tran" v-if="levelingOrder.orderStatus !=3" @click="confirm">申请完成</a>
                    <a id="refund" class="tion" @click="appeal">我要申诉</a>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
        name: '',
        data () {
            return {
              defaultImg:require('images/default_img.jpg'),
                publish: false,
                postData: {},
                type: 0, /*1,玩家;2,打手;3,店铺*/
            }
        },
        computed: {
            bullyUserInfo(){
                if (this.$store.state.dl.orderInfo.bullyUserInfo == undefined) {
                    return false
                } else {
                    return this.$store.state.dl.orderInfo.bullyUserInfo;
                }
            },
            levelingOrder(){
                return this.$store.state.dl.orderInfo.levelingOrder || {};
            },
            playerUserInfo(){
                if (this.$store.state.dl.orderInfo.playerUserInfo == undefined) {
                    return false
                } else {
                    return this.$store.state.dl.orderInfo.playerUserInfo;
                }
            },
            progress(){
                return this.$store.state.dl.progress || {};
            },
          ...mapState({
            mainOrderInfo: state => state.dl.mainOrderInfo,
          })
        },
        created(){
            var self = this;
            self.$store.commit('SET_PROGRESS', '');
          if(!self.$route.query.mainOrderNum || self.$route.query.mainOrderNum=='false'){
            if (self.$route.query.type == 2) {
              self.$store.commit('SET_ORDERTYPE', 'bullyOrder/');
              self.$store.commit('SET_MESSAGETYPE', 'getuserflowmessage')
            }
            this.getProgress({orderId: this.$route.query.orderNum});
            this.getOrderInfo(this.$route.query.orderNum)
              .then((orderInfo) => {
                //console.log(orderInfo);
                if (self.levelingOrder.gameName != '守望先锋' && self.levelingOrder.orderType != 5) {
                  this.publish = true;
                }
                if (self.levelingOrder.orderType == 5) {
                  self.$bus.emit('headerText', `陪练中`);
                } else {
                  self.$bus.emit('headerText', `代练中`);
                }
              });
          }else{
            this.$store.dispatch('dl/GET_DL_WZRY_ORDERINFO',{orderNo:this.$route.query.orderNum}).then(res=>{
              console.log(res)
              self.$bus.emit('headerText', `代练中`);
            })
          }

        },
        mounted: function () {


        },
        destroyed(){
            var self = this;
            self.$bus.emit('headerText', '');
        },
        methods: {
            ...mapActions({
                    getOrderInfo: 'GET_ORDERINFO',
                    getProgress: 'GET_PROGRESS'
                }
            ),
            getMyDate(str) {
                var oDate = new Date(str);
                var oMonth, oDay, oHour, oMin, oTime;

                function toauto(s) {
                    return s < 10 ? '0' + s : s;
                };
                oMonth = oDate.getMonth() + 1,
                    oDay = oDate.getDate(),
                    oHour = oDate.getHours(),
                    oMin = toauto(oDate.getMinutes()),

                    oTime = oMonth + '-' + oDay + ' ' + oHour + ':' + oMin;//最后拼接时间
                return oTime;
            },
            next(){
                this.$router.push({
                    name: 'PlPublish',
                    query: {
                        'gName': this.levelingOrder.gameName,
                        'aName': this.levelingOrder.regionName,
                        'sName': this.levelingOrder.serverName,
                        'gameId': this.levelingOrder.gameId
                    }
                });
            },
            confirm(){


                this.$messagebox({
                    message: '是否确定完成?',
                    showCancelButton: true,
                    confirmButtonClass: "dlMessageboxConfrim",
                    cancelButtonClass: "dlMessageboxCancel",
                }).then(action => {
                    if (action == "confirm") {
                      if(!this.$route.query.mainOrderNum){
                        this.postData.orderNum = this.$route.query.orderNum;
                        this.$http.post(this.$CONSTANTS.APIdl + 'bullyOrder/applycomplete', this.postData).then((res) => {
                          console.log(res);
                          this.getOrderInfo(this.$route.query.orderNum);
                          this.getProgress({orderId: this.$route.query.orderNum});
                        }, (res) => {
                          console.log(res)
                        });
                      }else{
                        this.postData.orderNo = this.$route.query.orderNum;
                        this.$http.post(this.$CONSTANTS.APIdl+'levelingmainorder/confirm',this.postData).then(res=>{
                          if(res.body.responseStatus.code=='00'){
                            this.$router.push(
                              {name: 'DlSeller',params:{state:'complete'}}
                            )
                          }else{
                            this.$messagebox.alert(res.body.responseStatus.message)
                          }
                        },res=>{

                        })
                      }
                    } else {
                        return false
                    }
                });
            },
            appeal(){
                this.$router.push({name: 'DlBuyerAppeal', query: {orderNum: this.$route.query.orderNum, type: 2,mainOrderNum:this.$route.query.mainOrderNum}})
            }
        }
    }
</script>

<style src="css/dlAll/dl-cxy.css"></style>
<style>
    .dlMessageboxConfrim {
        order: 1;
    }

    .dlMessageboxCancel {
        order: 2;
        border-left: 1px solid #ddd !important;
    }
</style>

